<template>
  <div id="agent">
    <!--搜索-->
    <div class="search-content">
      <div>
        <el-input v-model="id" placeholder="请输入用户id查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="agentName" placeholder="请输入代理名称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="mail" placeholder="请输入邮箱查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="phone" placeholder="请输入手机号查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-select v-model="status" clearable placeholder="请选择账号状态"  @change="inquiryList" >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
      </div>
      <div class="search-apply">
        <el-button type="warning" icon="el-icon-edit" @click="addAgent">新增</el-button>
      </div>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="id" prop="id"  align="center" />
        <el-table-column label="用户名称" prop="userName"  align="center" />
        <el-table-column label="代理名称" prop="name"  align="center" />
        <el-table-column label="邮箱地址" prop="mail" width="160" align="center" />
        <el-table-column label="电话号码" prop="phone"  width="110" align="center" />
        <el-table-column label="充值返利" prop="rechargeRate"  align="center" />
        <el-table-column label="消费返利" prop="consumptionRate"  align="center" />
        <el-table-column label="是否锁定" prop="lock"  align="center">
          <template slot-scope="scope">
            <el-tag size="small"  v-if="scope.row.lock"  type="danger">锁定</el-tag>
            <el-tag size="small" v-else  type="success">未锁定</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createDate" width="170"  align="center" />
        <el-table-column label="推荐注册地址" prop="recommendUrl" width="150" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.recommendUrl.length<20">{{scope.row.recommendUrl}}</span>
            <el-tooltip v-else :content="scope.row.recommendUrl" placement="top">
              <span>{{scope.row.recommendUrl.substring(0,19)+"..."}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="dealwithEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="dealwithDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--新增蒙层-->
    <el-dialog id="add-dialog" title="新增代理" :visible.sync="addDialogVisible">
      <el-form label-position="right" label-width="120px"  :model="add"  :rules="addRules" ref="addRuleForm">
        <el-form-item label="代理名称：" prop="name">
          <el-input v-model="add.name" placeholder="请输入代理名称" clearable />
        </el-form-item>
        <el-form-item label="登录名称：" prop="userName">
          <el-input v-model="add.userName" placeholder="请输入登录用户名" clearable />
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
          <el-input show-password  v-model="add.password" placeholder="请输入登录密码" clearable />
        </el-form-item>
        <el-form-item label="充值分润比例：" prop="rechargeRate">
          <el-input v-model="add.rechargeRate" placeholder="请输入充值分润比例" clearable />
        </el-form-item>
        <el-form-item label="消费分润比例：" prop="consumptionRate">
          <el-input v-model="add.consumptionRate" placeholder="请输入消费分润比例" clearable />
        </el-form-item>
        <el-form-item label="是否锁定：">
          <el-switch v-model="add.lock" inactive-text="不锁定" active-text="锁定"/>
        </el-form-item>
        <el-form-item label="邮件地址：" prop="mail">
          <el-input v-model="add.mail" placeholder="请输入邮件地址" clearable />
        </el-form-item>
        <el-form-item label="电话号码：" prop="phone">
          <el-input v-model="add.phone" placeholder="请输入电话号码" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="addSubmit('addRuleForm')">新 增</el-button>
      </span>
    </el-dialog>
    <!--修改蒙层-->
    <el-dialog id="edit-dialog" title="修改" :visible.sync="editDialogVisible">
      <el-form label-position="right" label-width="120px"  :model="edit"  :rules="editRules" ref="editRuleForm">
        <el-form-item label="代理名称：" prop="name">
          <el-input v-model="edit.name" placeholder="请输入代理名称" clearable />
        </el-form-item>
        <el-form-item label="登录名称：" prop="userName">
          <el-input v-model="edit.userName" placeholder="请输入登录用户名" clearable />
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
          <el-input show-password  v-model="edit.password" placeholder="请输入登录密码" clearable />
        </el-form-item>
        <el-form-item label="充值分润比例：" prop="rechargeRate">
          <el-input v-model="edit.rechargeRate" placeholder="请输入充值分润比例" clearable />
        </el-form-item>
        <el-form-item label="消费分润比例：" prop="consumptionRate">
          <el-input v-model="edit.consumptionRate" placeholder="请输入消费分润比例" clearable />
        </el-form-item>
        <el-form-item label="是否锁定：">
          <el-switch v-model="edit.lock" inactive-text="不锁定" active-text="锁定"/>
        </el-form-item>
        <el-form-item label="邮件地址：" prop="mail">
          <el-input v-model="edit.mail" placeholder="请输入邮件地址" clearable />
        </el-form-item>
        <el-form-item label="电话号码：" prop="phone">
          <el-input v-model="edit.phone" placeholder="请输入电话号码" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="editSubmit('editRuleForm')">修 改</el-button>
      </span>
    </el-dialog>
    <!--删除-->
    <el-dialog :visible.sync="delDialogVisible" width="300px" center id="del-dialog" top="20%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delKeys">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  import axios from 'axios'
  export default {
    name: "agentList",
    data(){
      var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('名称不能为空'));
        }else if(value.length<3){
          return callback(new Error('名称长度最少3位'));
        }else {
          callback();
        }
      };
      var checkPassword = (rule, value, callback) => {
        if(!value){
          return callback(new Error('登录密码不能为空'));
        }else if(value.length<6){
          return callback(new Error('登录密码长度最少6位'));
        }else {
          callback();
        }
      };
      var checkEditPassword = (rule, value, callback) => {
        if(!value){
          callback();
        }else if(value.length<6){
          return callback(new Error('登录密码长度最少6位'));
        }else {
          callback();
        }
      };
      var checkRate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('分润比例不能为空'));
        }else if(parseFloat(value) && parseFloat(value)>0 && parseFloat(value)<1){
          callback();
        }else {
          return callback(new Error('分润比例只能是0-1之间的小数'));
        }
      };
      var checkEmail = (rule, value, callback) => {
        if(!value){
          callback();
        }else if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)){
          return callback(new Error('邮件地址格式不正确'));
        }else {
          callback();
        }
      };
      var checkPhone = (rule, value, callback) => {
        if(!value){
          callback();
        }else if(!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)){
          return callback(new Error('电话号码格式不正确'));
        }else {
          callback();
        }
      };
      return{
        // 查询
        id:'',
        agentName:'',
        mail:'',
        phone:'',
        status:null,
        statusList:[
          {
            value:1,
            label:"锁定"
          },
          {
            value:0,
            label:"未锁定"
          }
        ],
        // 列表数据
        tableData:[],
        //新增
        addDialogVisible:false,
        add:{
          name:'',
          userName:'',
          password:'',
          rechargeRate:'',
          consumptionRate:'',
          lock:0,
          mail:'',
          phone:''
        },
        addRules:{
          name:[{validator: checkName, trigger: 'blur' }],
          userName:[{validator: checkName, trigger: 'blur' }],
          password:[{validator: checkPassword, trigger: 'blur' }],
          rechargeRate:[{validator: checkRate, trigger: 'blur' }],
          consumptionRate:[{validator: checkRate, trigger: 'blur' }],
          mail:[{validator: checkEmail, trigger: 'blur' }],
          phone:[{validator: checkPhone, trigger: 'blur' }]
        },
        //修改
        editDialogVisible:false,
        edit:{
          id:null,
          name:'',
          userName:'',
          password:'',
          rechargeRate:'',
          consumptionRate:'',
          lock:false,
          mail:'',
          phone:''
        },
        editRules:{
          name:[{validator: checkName, trigger: 'blur' }],
          userName:[{validator: checkName, trigger: 'blur' }],
          password:[{validator: checkEditPassword, trigger: 'blur' }],
          rechargeRate:[{validator: checkRate, trigger: 'blur' }],
          consumptionRate:[{validator: checkRate, trigger: 'blur' }],
          mail:[{validator: checkEmail, trigger: 'blur' }],
          phone:[{validator: checkPhone, trigger: 'blur' }],
        },
        // 删除
        delId:null,
        delDialogVisible:false,
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods:{
      isNotNull(value){
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
        if(this.isNotNull(that.id)){  //id
          data.filters.push({
            property:"id",
            value:that.id,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.agentName)){  //代理名称
          data.filters.push({
            property:"name",
            value:that.agentName,
            operator: "like"
          })
        }
        if(this.isNotNull(that.mail)){ //邮箱
          data.filters.push({
            property:"mail",
            value:that.mail,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.phone)){ //手机号
          data.filters.push({
            property:"phone",
            value:that.phone,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.status)){ //是否锁定
          data.filters.push({
            property:"`lock`",
            value:that.status,
            operator: "eq"
          })
        }
        request({
          method: 'post',
          url: 'admin/agent/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //新增
      getRebate(){
        let that=this;
        request({
          method: 'get',
          url: 'admin/agent/rebate'
        }).then(function (res) {
          if(res.code===200){
            that.add.rechargeRate=res.data.rechargeRebate;
            that.add.consumptionRate=res.data.consumptionRebate;
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      addAgent(){
        this.getRebate();
        this.addDialogVisible=true;
      },
      addSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that=this;
            request({
              method: 'post',
              url: 'admin/agent/save',
              data:that.add
            }).then(function (res) {
              if(res.code===200){
                that.addDialogVisible = false;
                Message.success("新增成功");
                that.$refs['addRuleForm'].resetFields();
                that.inquiryList();
              }
            }).catch(function (error) {
              console.log(error);
            });
          }else {
            return false;
          }
        });
      },
      //修改
      dealwithEdit(index, row) {
        this.editDialogVisible = true;
        this.edit = row;
      },
      editSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that=this;
            delete that.edit.createDate;
            delete that.edit.modifyDate;
            delete that.edit.recommendUrl;
            request({
              method: 'post',
              url: 'admin/agent/update',
              data:that.edit
            }).then(function (res) {
              if(res.code===200){
                that.editDialogVisible = false;
                Message.success("修改成功");
                that.inquiryList();
              }
            }).catch(function (error) {
              console.log(error);
            });
          }else {
            return false;
          }
        });
      },
      //删除
      dealwithDelete(index, row){
        this.delDialogVisible=true;
        this.delId=row.id;
      },
      delKeys(){
        let that=this;
        that.delDialogVisible=false;
        request({
          method: 'post',
          url: 'admin/agent/delete/'+that.delId,
        }).then(function (res) {
          if(res.code===200){
            Message.success("删除成功");
            that.delId=null;
            that.inquiryList();
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.inquiryList();
      }
    }
  }
</script>

<style scoped src="../../assets/css/agentManagement/agentlist.css">

</style>
